<template>
	<div id="tab-bar-item" @click="itemClick">
		<div v-if="!isActive"><slot name="item-icon"></slot></div>
		<div v-else><slot name="item-icon-active"></slot></div>
		<div :style="activeStyle"><slot name="item-text"></slot></div>
	</div>
	
</template>

<script>
	export default{
		name:'TabBarItem',
		props:{
			path:String,
			activeColor:{
				type:String,
				default:'#ff5577'//默认颜色
			}
			
		},
		
		data(){
			return{
				// isActive:true,	
			}
		},
		computed:{
			
			//动态绑定
			isActive(){
				// /home -> item1(/home) = true
				// /home -> item1(/category) = false
				// /home -> item1(/cart) = true
				// /home -> item1(/profile) = true
				return this.$route.path.indexOf(this.path) !== -1
			},
			activeStyle(){
				return this.isActive ? {color: this.activeColor}: {}
			}
		},
		methods:{
			itemClick(){
				this.$router.push(this.path)
			}
		}
	}
</script>

<style scoped>
	#tab-bar-item{
		flex: 1;
		text-align: center;
		font-size: 14px;
		height: 49px;
	}
	#tab-bar-item img{
		width: 24px;
		height: 24px;
		vertical-align: middle;
		margin-top: 3px;
	}
	#tab-bar-item div{
		margin-top: 2px;
	}
	.active{
		color:#ff5577;
	}
</style>
